<script type="text/javascript">
	var oDiv;
	var oImgForm;
	$(document).ready(function(){
			oDiv = $("#photoUpdateResult");
			
			listPhotos();
		});
	function uploadPic(){
		$("#imageForm").ajaxForm({
			dataType: 'json',
			success:function(data){
				resultMsg("Image file has been successfully uploaded.","success");
				listPhotos();
			},
			error:function(data){		
				resultMsg("Image file upload failed.","error");
			}
		}).submit();	
	}
	function resultMsg(text,cssClass){
		oDiv.text(text);
		oDiv.removeClass();
		oDiv.addClass(cssClass);
		oDiv.slideDown("slow").delay(1500).slideUp("slow");
	}
	function SaveProfilePic(){
		var val = $("input:radio[name='rdoProfPic']:checked").val();
		
		var aVals = new Array();
		$("input:checkbox[name='chkDelPics']:checked").each(function(){
			aVals.push($(this).val());
		});
		
		var valData = {"photo_id":val,"photos2del":aVals.join(","),"playerid":$("#hdnPlayerId").val()};
		$.post("index.php?dosoap=&saveProf=", valData ,function(data,textStatus){
			resultMsg("Profile picture has been successfully set.","success");
			listPhotos();
		}).error(function(jqXHR, textStatus, errorThrown){
			//alert("Error\n" + textStatus + "\n" + errorThrown + "\n" + jqXHR.responseText);
			resultMsg("Error occurred. " +  textStatus,"success");
		});
	}
	function listPhotos(){
		var valData = {"playerid":$("#hdnPlayerId").val()};
		$.post("index.php?dosoap=&listProfPics=",valData,function(data,textStatus){
			debugger;
			$("#imgList").empty();
			for(i=0;i<data.length;i++){
				$html = new Array();
				$html.push("<li style=\"clear:both\">");
				$html.push("<img id=\"timg" + data[i].photoId + "\" src=\"?display=&photo_id=" + data[i].photoId + "&size=t\" style=\"float:left\">");
				$html.push("<ul>");
				$html.push("<li><input type=\"checkbox\" name=\"chkDelPics\" value=\"" + data[i].photoId + "\"/>&nbsp;Delete</li>");
				$html.push("<li><input type=\"radio\" name=\"rdoProfPic\" value=\"" + data[i].photoId + "\" " + ((data[i].profilePic==1)?"checked":"") + "/>&nbsp;Set as the profile photo.</li>");
				$html.push("</ul>");
				$html.push("</li>");
				
				$("#imgList").append($html.join(""));
				$("#timg" + data[i].photoId).fadeIn("slow",function(){}); 
			}
		}).error(function(jqXHR, textStatus, errorThrown){
			alert("Error\n" + textStatus + "\n" + errorThrown + "\n" + jqXHR.responseText);
		});
	}
</script>
<?php printf("<a href=\"?viewProfile=&playerid=%s\">&lt;&lt; Back to profile</a>",$playerid);?>
<h3>Manage photos</h3>
<form id="imageForm" method="post" enctype="multipart/form-data" action="?dosoap=&upload=">
	<fieldset style="width:30%;margin-right:70%">
		<legend>Upload new photo</legend>	
		<input type="file"  name="newImage" id="newImage" /><input type="button" value="Upload" onclick="uploadPic();"/>
		<input type="hidden" name="dosoap" value="dosoap"/>
		<input type="hidden" name="upload" value="upload"/>
		<input type="hidden" name="playerid" value="<?php echo $playerid;?>"/>
	</fieldset>	
</form>
<div id="photoUpdateResult" style="display: none;"></div>
<fieldset>
	<legend>Select the profile photo</legend>
	<div id="tilelist">
		<?php printf("<input type=\"hidden\" id=\"hdnPlayerId\" value=\"%s\"/>",$playerid); ?>
		<ul id="imgList" style="clear:both"></ul>
	</div>
	<div style="width:100%;text-align:right">
		<input type="button" value="Save Changes" onclick="SaveProfilePic()" align="right"/>
	</div>
</fieldset>